import React from "react";
import store from "../store";
import { setMagAction } from "../store/actionCreators/homeAction";
const Index = () => {
  const data = store.getState().home;
  // 修改内容
  const setMsg = () => {
    store.dispatch(setMagAction("首页".repeat(3)));
  };
  // 数据包

  let arr = [
    { id: 1, name: "小红" },
    { id: 2, name: "小杠" },
    { id: 3, name: "小明" },
    { id: 4, name: "老王" },
    { id: 5, name: "小强" }
  ];
  return (
    <div>
      <h3>今天学习</h3>
      <p>
        {data.msg}
        {data.day}
      </p>
      <button onClick={setMsg}>修改内容</button>
      <hr />
      <p>查</p>
      <button
        onClick={() => {
          // 数组中的find方法是查找数据中的具体的值，返回值就是具体值，
          // 数据中的findIndex是查找该数据在数组中的具体的下标
          const index = arr.find(item => item.name === "小强");
          console.log(index);
        }}
      >
        查找小强
      </button>
      <p>改</p>
      <button
        onClick={() => {
          // 1. 先找到数据
          let laoWang = arr.find(item => item.id === 4);
          // 2. 把数据修改
          laoWang.name = "小王";
          // 3. 把数据替换回去id
          arr[arr.findIndex(item => item.id === 4)] = laoWang;
          console.log(arr);
        }}
      >
        老王变小王
      </button>
    </div>
  );
};

export default Index;
